<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
       <div id="app">
        <button @click="btnClick">按钮</button>
           <cpn ref="cpn1"></cpn>
       </div>

       <template id="cpn" ref="cpn">
           <div>
               我是子组件
           </div>
       </template>

       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       <script>
           const app=new Vue({
               el:'#app',
               data:{
                   message:'vuejs'
               },components:{
                   cpn:{
                       template:"#cpn",
                       methods:{
                            showMessage(){
                                console.log("showMessage");
                            }
                       }, data() {
                           return {
                               name: '我是子组件的name'
                           }
                       }
                   }
               },methods:{
                   btnClick(){
                    //1.$children 第一种获取子组件的方式，不推荐使用
                    //    console.log(this.$children);
                    //    console.log("btnClick");
                    //    this.$children[0].showMessage();
                    //    console.log(this.$children[0].name);

                    //1.$refs 第二种获取子组件的方式，推荐使用，但是要在组件的的属性中定义一个唯一的ref
                    console.log(this.$refs.cpn1.name);

                   }
               }
           })
       </script>
</body>
</html>